<template>
    <div>
        <el-button type="primary" @click="backPage" class="mb8">返回</el-button>
        <el-table :data="tableData" border>
            <el-table-column label="序号" width="100">
                <template #default="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column>
                <template #header>
                    <span><span style="color: red;">*</span>名称</span>
                </template>
                <template #default="scope">
                    <el-input v-model="scope.row.name" placeholder="请输入" />
                </template>
            </el-table-column>
            <el-table-column>
                <template #header>
                    <span><span style="color: red;">*</span>KEY</span>
                </template>
                <template #default="scope">
                    <el-input v-model="scope.row.key" placeholder="请输入" />
                </template>
            </el-table-column>
            <el-table-column label="默认值">
                <template #default="scope">
                    <el-input v-model="scope.row.value" placeholder="请输入" :disabled="!scope.row.status" />
                </template>
            </el-table-column>
            <el-table-column align="center" width="110">
                <template #header>
                    <span><span style="color: red;">*</span>是否可修改</span>
                </template>
                <template #default="scope">
                    <el-switch :width="58" class="demo" v-model="scope.row.status" :active-value="true"
                        :inactive-value="false" active-text="开启" inactive-text="关闭" inline-prompt />
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="80">
                <template #default="scope">
                    <el-button link type="danger" @click="handleDelete(scope.row)">
                        删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-descriptions :column="3" style="margin: 20px 0;">
            <el-descriptions-item><el-button type="primary" @click="handleAdd">添加一行</el-button></el-descriptions-item>
            <el-descriptions-item><el-button type="primary" @click="handleSave">保存</el-button><el-button type="primary"
                    plain @click="backPage">取消</el-button></el-descriptions-item>
        </el-descriptions>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const tableData = ref([])

onMounted(() => {
    getTemplate()
})
const getTemplate = () => {
    site.general.websitepublishrecordGetpublishtemplate(
        {}
    ).then((res) => {
        tableData.value = res.data.content ? JSON.parse(res.data.content) : []
    });
}
const handleSave = () => {
    if (validateAndSubmit(tableData.value)) return proxy.$modal.msgWarning(`请填写完成`);
    if (hasDuplicateLanguageIds(tableData.value)) return proxy.$modal.msgWarning(`key有相同值，请检查`);
    site.general
        .websitepublishrecordUpdatepublishtemplate({
            data: {
                content: JSON.stringify(tableData.value)
            },
        })
        .then((res) => {
            if (res.code !== 200) return;
            proxy.$modal.msgSuccess("模板已保存");
            backPage()
        });
}
const handleDelete = (row) => {
    if (row.name || ow.key || row.value) {
        proxy.$modal
            .confirm("是否确认删除此数据项？")
            .then(() => { tableData.value.splice(tableData.value.indexOf(row), 1) })
    } else {
        tableData.value.splice(tableData.value.indexOf(row), 1)
    }
}
const handleAdd = () => {
    tableData.value.push({ name: '', key: '', value: '', status: true })
}
const validateAndSubmit = (list) => {
    return list.some(row => !row.name.trim() || !row.key.trim() || !row.value.trim());
}
// 返回
const backPage = () => {
    router.back();
};
const hasDuplicateLanguageIds = (arr) => {
    const seen = new Set(); // 用于存储已经遇到的 languageId
    for (let item of arr) {
        if (seen.has(item.key)) {
            return true; // 如果发现重复值，返回 true
        }
        seen.add(item.key); // 否则添加到集合中
    }
    return false; // 如果循环结束后没有发现重复值，返回 false
};
</script>